<template>
  <!-- 组件：
    1:导入组件  import 组件名  from '组件路径'
    2:注册组件  components:{组件名}
    3:当标签使用 <组件名></组件名>

    父传子:注意点：子组件内不可修改父组件传入的数据(单向数据流)
       传
          <子组件标签 :属性名=变量 ></子组件标签>
          <子组件标签 属性名=值 ></子组件标签>
       收
         子组件内
         props:['属性名']
     子传父：子组件内触发父组件内的方法
       绑定：<子组件标签 @方法名='父组件的方法' ></子组件标签>
       觓发：this.$emit('方法名',实参值,...)


-->

  <div class="app-page">
    <h3>我是父组件</h3>
    <h4>{{ money }}</h4>
    <button @click="money++">修改money</button>
    <XxSon test="123" :toMoney="money" @sonSetMoney="setMoney"></XxSon>
  </div>
</template>
<script>
import XxSon from '@/components/XxSon.vue'
export default {
  components: { XxSon },
  data () {
    return {
      money: 100
    }
  },
  methods: {
    setMoney (num) {
      this.money = num
    }
  }
}
</script>
<style></style>
